<template>
  <div class="current_prize">
    <u-popup
      v-model="showCurrentPrize"
      mode="bottom"
      height="66%"
      border-radius="20"
      @close="close"
    >
      <view class="prize">
        <view class="top">
          <view class="iconfont icon-bangdan"></view>
          <view class="title">本期奖励</view>
          <view class="time"
            >第{{ cycle_number }}期 {{ date.start_date }}-{{
              date.end_date
            }}</view
          >
        </view>
        <scroll-view class="content-list" scroll-y>
          <view class="contain">
            <view
              class="prize_box"
              v-for="(item, index) in prize_box"
              :key="index"
            >
              <view class="number">第{{ item.ranking }}名</view>
              <view class="img_box">
                <img :src="item.image_text" alt="" />
                <view class="text">{{
                  item.award_type == 'goods'
                    ? item.goods_title
                    : item.coupon_title
                }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </div>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    show: {
      type: [Boolean],
      default: false,
    },
    type: {
      type: [String],
      default: 'day',
    },
  },
  data() {
    return {
      showCurrentPrize: false,
      prize_box: [],
      cycle_number: 0, //期数
      date: {}, //时间
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {
    show(val) {
      this.showCurrentPrize = val;
    },
    type(val) {
      this.getCurrent_award();
    },
  },
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  mounted() {
    this.getCurrent_award();
  },
  methods: {
    //关闭弹出层
    close() {
      this.$emit('noShow', false);
    },
    //本期奖品列表
    getCurrent_award() {
      this.$http(
        'v1.getCurrent_award',
        {
          type: this.type,
        },
        '请稍等'
      ).then((res) => {
        if (res.code === 1) {
          this.prize_box = res.data.list;
          this.cycle_number = res.data.cycle_number;
          this.date = res.data.date;
        }
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.current_prize {
  .prize {
    padding: 40rpx 30rpx 20rpx;
    display: flex;
    flex-direction: column;
    height: 100%;
    .top {
      display: flex;
      align-items: center;
      height: 40rpx;
      margin-bottom: 36rpx;
      .iconfont {
        color: #a084f0;
        font-size: 48rpx;
      }
      .title {
        font-size: 36rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .time {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #939393;
        margin-left: 18rpx;
      }
    }
    .contain {
      flex: 1;
      // overflow: auto;
      display: flex;
      flex-direction: column;
      .prize_box {
        width: 100%;
        height: 500rpx;
        margin-bottom: 10rpx;
        .number {
          font-size: 28rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 700;
          color: #3d3d3d;
          padding-left: 60rpx;
        }
        .img_box {
          position: relative;
          width: 100%;
          height: 450rpx;
          border-radius: 20rpx;
          // background: #c3b1f5;
          // background-image: radial-gradient(circle, #a084f0, #f1ecfe);
          // background: rgba(255, 255, 255, 0.3);
          // box-shadow: inset 0rpx 4rpx 10rpx 0rpx #d7c9ff;
          background: #a184f09a;
          box-shadow: inset 0rpx 4rpx 50rpx 40rpx rgba(255, 255, 255, 0.7);
          padding: 10rpx 18rpx;
          img {
            width: 100%;
            height: 378rpx;
            border-radius: 20rpx;
          }
          .text {
            font-size: 26rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 700;
            color: #3d3d3d;
            text-align: center;
            margin-top: 6rpx;
          }
        }
      }
    }
  }
}
.content-list {
  width: 100%;
  height: calc(100% - 100rpx);
}
</style>
